﻿@{
    ViewBag.Title = "Index";
}
@section Styles
{
    <link href="~/Content/chatForm.css" rel="stylesheet" />

}
@*<style>
    .ui-tabs-vertical {
        width: 55em;
    }

        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

            .ui-tabs-vertical .ui-tabs-nav li {
                clear: left;
                width: 100%;
                border-bottom-width: 1px !important;
                border-right-width: 0 !important;
                margin: 0 -1px .2em 0;
            }

                .ui-tabs-vertical .ui-tabs-nav li a {
                    display: block;
                }

                .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
                    padding-bottom: 0;
                    padding-right: .1em;
                    border-right-width: 1px;
                    border-right-width: 1px;
                }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
</style>*@
<section>
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="~/Content/Images/microsoft_image1.jpg" />
                <div class="carousel-caption">
                    <h4>Works great on windows phone 7
                    </h4>
                    <p>
                        Works great on Windows phone, IOS, and Android
                    </p>
                    <span>See supported phones
                    </span>
                </div>
            </div>
            <div class="item">
                <img src="~/Content/Images/api1.gif" />
                <div class="carousel-caption">
                    <h4>Api Fix
                    </h4>
                    <p>
                        World class standard apis up for grabs
                    </p>
                    <span>Get yours now?
                    </span>
                </div>
            </div>
            <div class="item">
                <img src="~/Content/Images/microsoft_image2.jpg" />
                <div class="carousel-caption">
                    <h4>Windows 8 market
                    </h4>
                    <p>
                        Need a personal / business windows 8 marketplace app?
                    </p>
                    <span>Get a quote today
                    </span>
                </div>
            </div>
            <div class="item">
                <img src="~/Content/Images/microsoft_image3.jpg" />
                <div class="carousel-caption">
                    <h4>Fit for tablets
                    </h4>
                    <p>
                        All size tablets we do optimize for
                    </p>
                    <span>See list, Ipad, windows tablets, android tablets e.t.c
                    </span>
                </div>
            </div>
            <div class="item">
                <img src="~/Content/Images/Html5.jpg" />
                <div class="carousel-caption">
                    <h4>Latest web standards!
                    </h4>
                    <p>
                        Feel at home with the latest web standards.
                                Html5, Css3, responsive design, you name it we make it!
                    </p>
                    <span>See what we mean.
                    </span>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</section>
<section class="discover-and-highlights">
    <nav class="discover span3">
        <h2>Discover
        </h2>
        <ul>
            <li>
                @Html.ActionLink("Windows", "Index", "Home", null, new Dictionary<string, object> { { "class", "secondary-nav-link" } })
            </li>
            <li>
                @Html.ActionLink("Web", "Index", "Home", null, new Dictionary<string, object> { { "class", "secondary-nav-link" } })
            </li>
            <li>
                @Html.ActionLink("Phone", "Index", "Home", null, new Dictionary<string, object> { { "class", "secondary-nav-link" } })
            </li>
            <li>
                @Html.ActionLink("Office", "Index", "Home", null, new Dictionary<string, object> { { "class", "secondary-nav-link" } })
            </li>
        </ul>
    </nav>
    <div class="highlights span9">
        <h2>Highlights
        </h2>
        <ul class="upper-highlights thumbnails">
            <li class="span4">
                <div class="left thumbnail">
                    <img src="~/Content/Images/ready-made.gif" />
                    <div>
                        <h4>Ready made solutions!</h4>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="middle thumbnail">
                    <img src="~/Content/Images/custom-made.jpg" />
                    <div>
                        <h4>Custom Web Solutions!</h4>
                    </div>
                </div>
            </li>
            <li class="span4">
                <div class="right thumbnail">
                    <img src="~/Content/Images/price-calculator.jpg" />
                    <div>
                        <h4>Still not sure? Get estimate here!</h4>
                    </div>
                </div>
            </li>
        </ul>
        <div class="lower-highlights row-fluid">
            Lower Highlights
        </div>
    </div>
</section>

<h2>Welcome to Quick Chat</h2>
<div class="selectedRoom">
    <h3>Selected Room Title : <span data-bind="text : currentRoom"></span></h3>
    <div data-bind="template : {name : 'usersListTemplate', foreach : SelectedRoomUsers }"></div>
</div>



<div id="chatContainer">
    <div id="tabs" data-bind="jqueryTabs: { fx: { opacity: 'toggle' } }">
        <ul data-bind=" foreach : listOfChatRooms">
            <li><a data-bind="attr : { href : '#tabs-' + (1+($index)())}, text : 'Room ' + ($index)()"></a></li>
        </ul>
        <!-- ko foreach : listOfChatRooms -->
        <div data-bind="attr : { id : 'tabs-' + (1+($index)())}, template: { name : 'userListTemplate', foreach : $data.Talkers }">
            <h2>Room Users</h2>
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <!-- /ko -->
    </div>
    <div id="chatInnerContainer">
        <div id="chatMessageArea" data-bind="template: { name : 'messageListTemplate', foreach : listOfMessages }">
        </div>
        <form name="chatForm" id="chatForm" action="#">
            <input type="text" name="chatMessage" id="chatMessage" />
            <input type="submit" name="sendButton" value="Send" id="sendButton" data-bind="click:sendButtonClicked" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" />
        </form>
    </div>
</div>

@* Templates Start *@

<script type="text/html" id="userListTemplate">
    <p class="singleUser">
        <span class="userAlias" data-bind="text : ChatAlias"></span>
    </p>
</script>

<script type="text/html" id="roomsTemplate">
    <ul data-bind=" foreach : listOfChatRooms">
        <li><a data-bind="attr : { href : '#tabs-' + (1+($index)())}">Room Tab Name</a></li>
    </ul>
    <!-- ko foreach : listOfChatRooms -->
    <div data-bind="attr : { id : 'tabs-' + (1+($index)())}">
        <h2>Content heading 1</h2>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <!-- /ko -->
</script>

<script type="text/html" id="messageListTemplate">
    <p class="singleChatMessage">
        <span data-bind="text : sender"></span>: <span data-bind="text : message"></span>
    </p>
</script>
@* Templates End *@
@section Scripts {
    <script type="text/javascript" src="~/Scripts/custom/custom.home.index.js"></script>
}
